<template>
	<!-- 注册 -->
	<view class="register">
		<view class="header">
			<view class="status-bar"></view>
			<view class="title">
				<view class="flex aside" @click="fnGoBack()">
					<uni-icons type="arrowleft" size="24" color="#fff"></uni-icons>
				</view>
				<view class="flex-c center">
					<text>欢迎来到东风彩</text>
				</view>
			</view>
		</view>
		<view class="contentBox">
			<view class="r-top flex-c">
				<text>注册账号</text>
			</view>
			<view class="r-content">
				<view class="item flex-bc">
					<view class="inputer flex">
						<image src="../../../static/common/phone.png"></image>
						<input class="uni-input" type="number" placeholder="请输入手机号" v-model="mobile" />
					</view>
				</view>
				<view class="item flex-bc">
					<view class="inputer flex">
						<image src="../../../static/common/verification-code.png"></image>
						<input class="uni-input" type="number" placeholder="请输入验证码" v-model="verCode" />
					</view>
					<view class="ver-code" @click="fnGetVerCode()">
						<text>{{codeText}}</text>
					</view>
				</view>
				<view class="item flex-bc">
					<view class="inputer flex">
						<image src="../../../static/common/password.png"></image>
						<input class="uni-input password" :password="showPassword" type="text" placeholder="请输入密码(6-18位)" v-model="pass" />
					</view>
					<view class="ifsee" v-if="pass" @click="fnSeePass(1)">
						<image :src="seeSrc.see" v-if="seePass"></image>
						<image :src="seeSrc.nosee" v-else></image>
					</view>
				</view>
				<view class="item flex-bc">
					<view class="inputer flex">
						<image src="../../../static/common/password.png"></image>
						<input class="uni-input rePassword" :password="showRepassword" type="text" placeholder="请再次输入密码" v-model="repass" />
					</view>
					<view class="ifsee" v-if="repass" @click="fnSeePass(2)">
						<image :src="seeSrc.see" v-if="seeRepass"></image>
						<image :src="seeSrc.nosee" v-else></image>
					</view>
				</view>
				<view class="item btn flex-c" @click="fnUserRegister()">
					<text>注册</text>
				</view>
				<view class="privacy flex-col-ac">
					<text class="toLogin" @click="fnToLogin()">已有账号去登录</text>
					<view class="flex-c">
						<view class="choose" @click="fnAgreePrivacy()">
							<image :src="chooseSrc"></image>
						</view>
						<view class="agreement">
							我已阅读并同意<text @click="fnToPrivacy(1)">《用户协议》</text>和<text @click="fnToPrivacy(2)">《隐私政策》</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const util = require('../../../common/util.js')
	export default {
		data() {
			return {
				codeText: '获取验证码',
				mobile: '',
				verCode: '',
				pass: '',
				repass: '',
				agreement: true,
				seePass: false,
				seeRepass: false,
				showPassword: true,
				showRepassword: true,
				flag: true,
				seeSrc: {
					see: '../../../static/common/see.png',
					nosee: '../../../static/common/not-see.png'
				},
				chooseSrc:'../../../static/common/choose.png'
			};
		},
		methods: {
			fnGoBack() {
				uni.navigateBack()
			},
			fnToLogin() {
				uni.navigateTo({
					url: "../login/login"
				})
			},
			fnToPrivacy(index) {
				var url = '../userAgreement/userAgreement'
				if (index == 2) {
					url = '../privacy/privacy'
				}
				uni.navigateTo({
					url: url
				})
			},
			// 获取验证码
			fnGetVerCode() {
				if (util.isPhoneNo(this.mobile)) { //验证是手机号 获取验证码
					if (!this.flag) return
					var count = 60
					this.codeText = count+'s'
					var that = this
					var timer = setInterval(function() {
						that.flag = false
						count--
						that.codeText = count+'s'
						if (count <= 0) {
							clearInterval(timer)
							that.codeText = '获取验证码'
							that.flag = true
						}
					}, 1000)
					this.fnGetRegisterVerCode(this.mobile)
				} else {
					return
				}
			},
			// 获取注册验证码接口
			fnGetRegisterVerCode(mobile) {
				var that = this
				that.request({
					url: '/czb/User/sendSms',
					method: 'POST',
					data: {
						'type': 2,
						'mobile': mobile,
						'store_id': 1
					},
				}).then((ret) => {
					console.log(ret);
					if(ret.code == 1){
						uni.showToast({
							title: ret.message+'去登录',
							icon: 'none'
						})
						setTimeout(function(){
							uni.navigateTo({
								url:'../login/login'
							})
						},1500)
					}
				})
			},
			fnUserRegister() { //注册
				if (!util.isPhoneNo(this.mobile)) return uni.showToast({
					title: '请输入正确的手机号',
					icon: 'none'
				})
				if (!this.verCode) return uni.showToast({
					title: '请输入验证码',
					icon: 'none'
				})
				if (!this.pass) return uni.showToast({
					title: '请输入密码',
					icon: 'none'
				})
				if (!this.repass || this.pass != this.repass) return uni.showToast({
					title: '请再次输入相同的密码',
					icon: 'none'
				})
				if(!this.agreement) return uni.showToast({
					title: '请勾选协议',
					icon: 'none'
				})
				// 验证完毕调用注册接口
				var that = this
				that.request({
					url: '/czb/User/userRegister',
					method: 'POST',
					data: {
						'password': that.pass,
						'mobile': that.mobile,
						'store_id': 1,
						'code': that.verCode,
						'confirm_password': that.repass,
						'invite_code': ''
					},
				}).then((ret) => {
					console.log(ret);
					if(ret.code == 0){
						uni.showToast({
							title: ret.message+'去登录',
							icon: 'success'
						})
						setTimeout(function(){
							uni.navigateTo({
								url:'../login/login'
							})
						},1500)
					}
				})

			},
			// 点击查看密码
			fnSeePass(index) {
				if (index == 1) { //首次密码
					if (this.seePass) { //该显示了
						this.showPassword = true
					} else {
						console.log('显示')
						this.showPassword = false
					}
					this.seePass = !this.seePass
				} else { //再次密码
					if (this.seeRepass) { //该显示了
						this.showRepassword = true
					} else {
						this.showRepassword = false
					}
					this.seeRepass = !this.seeRepass
				}
			},
			fnAgreePrivacy(){
				if(!this.agreement){
					this.chooseSrc = '../../../static/common/choose.png'
				}else{
					this.chooseSrc = '../../../static/common/no-choose.png'
				}
				this.agreement = !this.agreement
				console.log(this.agreement)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.register {
		height: 100%;
	}

	.header {
		height: 704rpx;
		width: 100%;
		background: url(../../../static/common/top-bg.png)no-repeat center/100%;

		.status-bar {
			height: var(--status-bar-height);
		}

		.title {
			width: 100%;
			font-size: 32rpx;
			color: #fff;
			/*  #ifdef  H5  */
			height: 88rpx;
			/*  #endif  */
			/*  #ifdef  APP-PLUS  */
			height: 60rpx;
			/*  #endif  */
			padding-top: var(--status-bar-height);
			box-sizing: border-box;
			position: relative;

			view {
				padding: 0 10rpx;
				height: 100%;
				box-sizing: border-box;
				align-items: center;
				font-size: 48rpx;
				color: #F4F5FA;
			}

			.aside {
				width: 20%;
			}

			.center {
				position: absolute;
				top: 60rpx;
				left: 50%;
				transform: translateX(-50%);
			}
		}
	}

	.contentBox {
		width: 638rpx;
		box-shadow: 0px 6rpx 40rpx 0px rgba(0, 0, 0, 0.1);
		border-radius: 30px;
		background: #FFFFFF;
		border-radius: 30rpx;
		margin: 0 auto 20rpx;
		top: -156rpx;
		position: relative;
		color: #F2342D;
		font-size: 32rpx;
		padding-bottom: 62rpx;

		.r-top {
			height: 126rpx;
			background: #FFFFFF;
			border-bottom: 1rpx solid #eee;
			border-radius: 30rpx 30rpx 0px 0px;
		}

		.r-content {
			width: 550rpx;
			margin: 0 auto;

			.item {
				margin-top: 40rpx;
				height: 100rpx;
				background: #F7F8F9;
				border-radius: 50rpx;
				width: 100%;
				padding: 0 50rpx;
				box-sizing: border-box;

				.inputer {
					align-items: center;

					image {
						width: 46rpx;
						height: 46rpx;
						margin-right: 10rpx;
						display: block;
					}

					.uni-input {
						font-size: 28rpx !important;
						color: #333 !important;
					}

				}

				.ver-code {
					padding: 20rpx 0;
					font-size: 24rpx;
					color: #F54137;

					text {
						white-space: nowrap;
					}
				}

				.ifsee {
					image {
						width: 32rpx;
						height: 24rpx;
					}
				}
			}

			.btn {
				background: linear-gradient(270deg, #F22F29, #FC6655);
				margin: 60rpx 0 10rpx;
				color: #fff;
				font-size: 34rpx;
			}

			.privacy {
				font-size: 22rpx;
				color: #999;

				.choose {
					padding: 10rpx;

					image {
						width: 24rpx;
						height: 24rpx;
					}
				}

				.toLogin {
					color: #666;
					padding: 20rpx;
				}

				.agreement {
					font-size: 20rpx;

					text {
						color: #F54137;
					}
				}
			}
		}
	}
</style>
